<template>
  <div>

    <div
        style="background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.1));height: 120px;position: fixed;z-index:5;width:100%">
      <el-link icon="el-icon-more" style="float: left;margin:50px 0 0 50px;color:white" :underline="false"></el-link>
      <!--登陆前显示的-->
      <div style="display: inline" v-if="unLogin">
        <el-link icon="el-icon-user-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                 @click="reg"
        >用户注册
        </el-link>
        <el-link icon="el-icon-user" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                 @click="login"
        >用户登录
        </el-link>
      </div>
      <!--登陆前显示的-->
      <!--登陆后显示的-->
      <div style="display: inline" v-else>
        <el-link icon="el-icon-message-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                 @click="logout">退出登陆
        </el-link>
        <el-link icon="el-icon-document-copy" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                 href="/customer/orders">订单查询
        </el-link>
        <el-link icon="el-icon-s-order" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                 href="/customer/info">用户详情
        </el-link>
        <el-link icon="el-icon-s-custom" style="float: right;margin:50px 20px 0 0;color:white" :underline="false">
          欢迎回来，{{user.nickname}}
        </el-link>
      </div>
      <!--登陆后显示的-->
      <!--logo-->
      <div>
        <img src="/imgs/logo2.png" style="width:150px;margin-top:10px">
      </div>
      <!--logo-->
    </div>

    <div>
      <!--轮播图-->
      <el-carousel height="900px">
        <el-carousel-item v-for="item in slideshow" :key="item.id">
          <img :src="item.picUrl" style="height:100%;width:100%">
        </el-carousel-item>
      </el-carousel>
      <!--轮播图-->
      <!--酒店介绍-->
      <div style="width:600px;padding: 30px;position: absolute;bottom:100px;right:100px;background-color: rgba(150,150,150,0.5);z-index: 4;
          border-radius: 10px;
             ">
        <p style="color:white;font-size: 18px;text-indent:30px;line-height: 25px">
          酒店于2015年4月18日开业，拥有195间装饰极具现代感、宽敞豪华的
          客房和套房，设有西餐厅、多功能会议厅、酒吧、健身房、网球场、商务
          服务、大型停车场等服务设施一应俱全。现代简约、宽敞的豪华客房面积
          达到42平方米以上，配备舒适的品牌睡床、无线和宽带上网、卫星电视等
          设施。园林化的休憩空间、品质化的消费环境、个性化的悉心服务、尽善尽
          美的服务设施，是休闲商务、购物娱乐、旅游度假的首选之地。酒店致力于
          时刻为每一位宾客提供全方位殷勤服务，独享华美达品牌的服务和尊贵。乐
          居于酒店，您可安心享受便捷和舒适的商务之旅。
        </p>
      </div>
      <!--酒店介绍-->
      <!--日历-->

      <!--日历-->

      <!--色彩分割-->
      <div style="width:100%;height:20px;background-color: #9f7650"></div>
      <!--色彩分割-->

      <!--客房介绍-->
      <div style="width:1500px;height:500px;margin:50px auto;" >
        <div v-for="item in detailImg" class="div-detail"
             style="box-shadow: 4px 4px 3px 0 rgba(150, 150, 150, 0.8);width: 300px;border-radius: 4px;margin: 20px;display: inline-block">
          <img :src="item.picUrl"
               style="width:100%;height: 200px;border-top-left-radius: 4px;border-top-right-radius: 4px">
          <div style="padding:10px">
            <ul v-for="detail in item.detail" style="list-style-type: none;padding: 0 5px 5px 0;">
              <li style="margin-bottom: 5px">
                <i class="el-icon-caret-right" style=" color: rgb(150, 150, 150);margin-right: 5px;"></i>
                <span style="color: rgb(130, 110, 90);font-size: 13px;">{{ detail }}</span>
              </li>
            </ul>
            <a href="/detail" v-model="item.id" style="margin-top: 20px;display: block;text-decoration: none;"
               @click="href(item.id)">
              <span style="color: rgb(130, 110, 90);font-size: 14px;font-weight: bold;">查看详情</span>
            </a>
          </div>
        </div>
      </div>
      <!--客房介绍-->
    </div>
    <div style="width:100%;height:120px;background-color: #403f3f;padding-top: 50px">
      <p align="center" style="color:#dddada;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备
        11010802029572号</p>
      <p align="center" style="color:#dddada;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      <p align="center" style="color:#dddada;">达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
    </div>

    <!-- 以下是弹出的注册用的对话框 -->
    <el-dialog title="用户注册" :visible.sync="regUserFrom" :show-close="false" :close-on-click-modal="false">
      <el-form :model="regUser" status-icon :rules="rules" ref="regUser"
               label-width="100px" class="demo-regUser" style="width: 400px; margin: 50px auto;">
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="regUser.tel"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="regUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="regUser.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input type="text" v-model="regUser.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="keepLogin" :label=true style="float: left">保持登录</el-checkbox>
          <el-button @click="resetForm('regUser')">重置</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelReg">取 消</el-button>
        <el-button type="primary" @click="regSubmitForm('regUser')">注 册</el-button>
      </div>
    </el-dialog>
    <!-- 以上是弹出的注册用的对话框 -->
    <!-- 以下是弹出的登录用的对话框 -->
    <el-dialog title="用户登录" :visible.sync="loginUserFrom" :show-close="false" :close-on-click-modal="false">
      <el-form :model="loginUser" status-icon :rules="rules" ref="loginUser" label-width="100px" class="demo-loginUser"
               style="width: 400px; margin: 50px auto;">
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="loginUser.tel"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="keepLogin" :label=true style="float: left">保持登录</el-checkbox>
          <el-button @click="resetForm1('loginUser')">重置</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelLog">取 消</el-button>
        <el-button type="primary" @click="loginSubmitForm('loginUser')">登 录</el-button>
      </div>
    </el-dialog>
    <!-- 以上是弹出的登录用的对话框 -->

  </div>
</template>

<script>
export default {
  data() {
    var checkPassword = (rule, value, callback) => {
      if (value !== this.regUser.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      rules: {
        password: [
          {required: true, message: '请输入密码',trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        tel: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 6, max: 100, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ],
        checkPass: [
          {required: true, message: '请输入相同的密码',validator:checkPassword ,trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],

      },
      /*注册用的部分---------------------------------------*/
      regUserFrom: false,
      regUser: {
        nickname: '',
        tel: '',
        password: '',
        checkPass: '',
      },
      /*注册用的部分---------------------------------------*/

      /*登录用的部分---------------------------------------*/
      loginUserFrom: false,
      loginUser: {
        tel: '',
        password: '',
      },
      keepLogin:false,
      /*登录用的部分---------------------------------------*/

      user: {},
      unLogin: true,
      slideshow: [],
      detailImg: [],

      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    /*登陆用方法的部分---------------------*/
    login(){
      this.loginUserFrom = true;
    },
    cancelLog(){
      this.loginUserFrom = false
      if(localStorage.getItem("detail-log")){
        localStorage.removeItem("detail-log")
      }
    },
    loginSubmitForm(loginUser) {
      this.$refs[loginUser].validate((valid) => {
        if (valid) {
          let fromDate=this.qs.stringify(this.loginUser)
          let url = 'http://localhost:9080/user/login'
          console.log("登录用url=" + url);
          this.axios.post(url,fromDate).then((response) => {
            let responseBody = response.data
            console.log(responseBody.state)
            if (responseBody.state == 20000) {
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let url='http://localhost:9080/user/currentUser'
              this.axios.get(url).then((response)=>{
                let responseBody=response.data
                this.user = responseBody.data;
                console.log("用户名："+this.user.nickname)
                localStorage.setItem('user', JSON.stringify(this.user));
                if(this.keepLogin){
                  console.log("keepLogin:"+this.keepLogin);
                  localStorage.setItem("keepLogin",this.keepLogin);
                }
                if(localStorage.getItem("detail-log")){
                  localStorage.removeItem("detail-log")
                  this.$router.push("/detail")
                }
                this.unLogin = false;
                this.loginUserFrom = false;
              });
            } else if (responseBody.state == 40400) {
              this.$message({
                message: responseBody.message,
                type: 'error'
              });
            } else {
              this.$message({
                message: responseBody.message,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
    /*登陆用方法的部分---------------------*/
    /*注册用的方法部分---------------------*/
    reg() {
      this.regUserFrom = true;
    },
    cancelReg(){
      this.regUserFrom = false;
      if(localStorage.getItem("detail-reg")){
        localStorage.removeItem("detail-reg")
      }
    },
    regSubmitForm(regUser) {
      this.$refs[regUser].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9080/user/reg'
          console.log("注册用url=" + url);
          let user={nickname: this.regUser.nickname, tel: this.regUser.tel, password: this.regUser.password,}
          let fromDate=this.qs.stringify(user);
          this.axios.post(url,fromDate).then((response) => {
            let responseData = response.data
            if (responseData.state == 20000) {
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success'
              });
              let url='http://localhost:9080/user/currentUser'
              this.axios.get(url).then((response)=>{
                let responseBody=response.data
                this.user = responseBody.data;
                console.log(this.user)
                localStorage.setItem('user', JSON.stringify(this.user));
                if(this.keepLogin){
                  console.log("keepLogin:"+this.keepLogin);
                  localStorage.setItem("keepLogin",this.keepLogin);
                }
              })
              if(localStorage.getItem("detail-reg")){
                localStorage.removeItem("detail-reg")
                this.$router.push("/detail")
              }
              this.unLogin = false;
              this.regUserFrom = false;
            } else {
              this.$message.error(responseData.message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*注册用的方法部分---------------------*/
    logout() {
      this.$confirm('您确定要退出登陆吗', '提示', {
        confirmButtonText: '退出登陆',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.unLogin = true;
        let url="http://localhost:9080/user/logout"
        this.axios.post(url).then((response)=>{
        })
        this.keepLogin=0;
        this.user=null;
        localStorage.removeItem("user")
        localStorage.removeItem("keepLogin")
      }).catch(() => {
      });
    },
    href(id) {
      localStorage.removeItem("roomId")
      console.log(id);
      let roomId = id;
      localStorage.setItem("roomId", roomId);
    },
    /*加载轮播图用的方法-------------------*/
    loadSlideshow() {
      let url = "http://localhost:9080/banner/get-list"
      console.log("请求轮播图列表，url=", url);
      this.axios
          .get(url).then((response) => {
        let responseBody=response.data;
        console.log(responseBody.data)
        this.slideshow = responseBody.data;
        for(let i of this.slideshow){
          console.log(i.picUrl)
        }
      })
    },
    /*加载轮播图用的方法-------------------*/
    /*加载客房详情用的方法-------------------*/
    loadDetailImg() {
      let url = "http://localhost:9080/roomType/list"
      console.log("请求酒店客类型介绍列表，url=", url)
      this.axios
          .get(url).then((response) => {
            let responseBody=response.data;
        this.detailImg = responseBody.data;
        for(let i=0;i<this.detailImg.length;i++){
          this.detailImg[i].detail=this.detailImg[i].equipment1+","+this.detailImg[i].equipment2+this.detailImg[i].equipment3+","+this.detailImg[i].equipment4+","+this.detailImg[i].equipment5+","+this.detailImg[i].equipment6+","+this.detailImg[i].equipment7;
          this.detailImg[i].detail=this.detailImg[i].detail.split(",")
        }
        console.log("酒店客房介绍：detailImg=", this.detailImg);
      })
    },
    /*加载客房详情用的方法-------------------*/
    /*一进入页面就加载用户的方法--------------*/
    currentUser(){
      this.keepLogin=localStorage.getItem("keepLogin");
      console.log(this.keepLogin)
      if(this.keepLogin){
        let url='http://localhost:9080/user/currentUser';
        this.axios.get(url).then((response)=>{
          let responseBody=response.data;
          if(responseBody.state=20000){
            this.user=responseBody.data;
            console.log(this.user.userName)

            localStorage.setItem("user",JSON.stringify(this.user));
            this.unLogin = false;
          }
        })
      }
    },
    detailRge(){
      if(localStorage.getItem("detail-reg")){

        this.regUserFrom = true;
      }
    },
    detailLog(){
      if(localStorage.getItem("detail-log")){

        this.loginUserFrom = true;
      }
    }
      /*一进入页面就加载用户的方法--------------*/
  },
  mounted() {
    this.loadSlideshow();
    this.loadDetailImg();
    this.currentUser();
    this.detailRge();
    this.detailLog();
  },
  created() {

  }
}
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.el-form-item__label {
  font-weight: bold;
  color: black;
}
.div-detail:hover{
  transition: all 0.3s;
  transform: scale(1.1);

}
</style>
